<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			html{
				font-size:62.5%;
			}
			body{
				font-size:1.6rem;
				
			}
			.wrap{
				width:100vW;
				height:100vh;
				overflow: hidden;
				/* background-color: red; */
				background-color: rgba(0,0,0,.1);
			}
			h2{
				width:100%;
				height:8rem;
				line-height: 8rem;
				text-align: center;
				/* background-color: green; */
				
			}
			
			ul{
				width:100%;
				height:100%;
				list-style: none;
				background-color: rgba(10,0,10,.1);
				padding:20px;
				margin:0 auto;
			}
			li{
				width:80%;
				height:10%;
				text-align: center;
				font-size: 3rem;
				line-height: 6em;
				background-color: rgba(0,255,255,.3);
				margin-top:3px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<h2>电池信息</h2>
			<ul id="oUl">
				<li>
					<span >电量剩余百分比</span>
					<b class="tip1"></b>
				</li>
				<li>
					<span>获取设备充电状态</span>
					<b class="tip2"></b>
				</li>
				<li>
					<span>设备完全充电需要的时间</span>
					<b class="tip3"></b>
				</li>
				<li>
					<span>全放电需要的时间</span>
					<b class="tip4"></b>
				</li>
				<li>
					<span>当设备电量改变时触发</span>
					<b class="tip5"></b>
				</li>
				<li>
					<span>当设备充电状态改变时触发</span>
					<b class="tip6"></b>
				</li>
				<li>
					<span>当设备完全充电需要时间改变时触发</span>
					<b class="tip7"></b>
				</li>
				<li>
					<span>当设备完全放电需要时间改变时触发</span>
					<b class="tip8"></b>
				</li>
			</ul>
		</div>
	</body>
	<script>
		const oUl = document.getElementById('oUl')
		var tip1 = document.querySelector(".tip1"),
		tip2 = document.querySelector(".tip2"),
		tip3 = document.querySelector(".tip3"),
		tip4 = document.querySelector(".tip4");
		navigator.getBattery().then(function (battery) {
		  // 获取设备电量剩余百分比
		  var level = battery.level //最大值为1,对应电量100%
		  console.log('Level: ' + level * 100 + '%')
		tip1.innerHTML = level * 100 + '%';
		  // 获取设备充电状态
		  var charging = battery.charging
		  console.log('充电状态: ' + charging)
		tip2.innerHTML = charging;
		  // 获取设备完全充电需要的时间
		  var chargingTime = battery.chargingTime
		  console.log('完全充电需要的时间: ' + chargingTime)
		tip3.innerHTML = chargingTime;
		
		  // 获取设备完全放电需要的时间
		  var dischargingTime = battery.dischargingTime
		  console.log('完全放电需要的时间: ' + dischargingTime)
		  tip4.innerHTML = dischargingTime;
		  
		  // 添加事件，当设备电量改变时触发
		  battery.addEventListener('levelchange', function () {
		    console.log('电量改变: ' + battery.level)
			tip5.innerHTML = battery.level;
		  })
		  
		  // 添加事件，当设备充电状态改变时触发
		  battery.addEventListener('chargingchange', function () {
		    console.log('充电状态改变: ' + battery.charging)
            alert(battery.charging)
			tip6.innerHTML = battery.charging;
		  })
		  
		  // 添加事件，当设备完全充电需要时间改变时触发
		  battery.addEventListener('chargingtimechange', function () {
		    console.log('完全充电需要时间: ' + battery.chargingTime)
             alert(battery.chargingTime)
			tip7.innerHTML = battery.chargingTime;
		  })
		  
		  // 添加事件，当设备完全放电需要时间改变时触发
		  battery.addEventListener('dischargingtimechange', function () {
		    console.log('完全放电需要时间: ' + battery.dischargingTime)
			tip8.innerHTML = battery.dischargingTime;
		  })
		})


/* navigator.getBattery().then(function (battery) {
  // 添加事件，当设备电量改变时触发
  battery.addEventListener('levelchange', function () {
    console.log('电量改变: ' + battery.level)
  })

  // 添加事件，当设备充电状态改变时触发
  battery.addEventListener('chargingchange', function () {
    console.log('充电状态改变: ' + battery.charging)
  })

  // 添加事件，当设备完全充电需要时间改变时触发
  battery.addEventListener('chargingtimechange', function () {
    console.log('完全充电需要时间: ' + battery.chargingTime)
  })

  // 添加事件，当设备完全放电需要时间改变时触发
  battery.addEventListener('dischargingtimechange', function () {
    console.log('完全放电需要时间: ' + battery.dischargingTime)
  })
})
 */
	</script>
</html>